---
title: はじめに
description: Astroの基本的な紹介です。
i18nReady: true
tableOfContents: false
editUrl: false
next: false
banner:
  content: |
    <a href="https://astro.build/blog/astro-4/">Astro バージョン 4.0 が登場！</a>
    アップグレードの準備はできましたか？ <a href="/ja/guides/upgrade-to/v4/">アップグレードガイドを読む</a>。
hero:
  title: Astro Docs
  tagline: Astroを使ってサイトを構築するためのガイド、リソース、APIリファレンス。
  actions:
    - text: はじめる
      icon: rocket
      link: /ja/install/auto/
      variant: primary
    - text: Astroの特徴について学ぶ
      icon: right-arrow
      link: /ja/concepts/why-astro/
  facepile:
    tagline: AstroとOSSコントリビューターにより支えられています。
    linkText: 参加しましょう！
    link: /ja/contribute/
---

import { CardGrid } from '@astrojs/starlight/components'
import Card from '~/components/Landing/Card.astro'
import ListCard from '~/components/Landing/ListCard.astro'
import SplitCard from '~/components/Landing/SplitCard.astro'
import Discord from '~/components/Landing/Discord.astro'

<CardGrid>
  <Card title="Astroで何を作るか？" icon="laptop">
    ブログやポートフォリオ、ドキュメント、ランディングページ、SaaS、マーケティング、ECサイトなどに対応した[Astroのスターターテーマ](https://astro.build/themes/)を探索してみましょう！
  </Card>

  <Card title="ガイド付きツアーに参加する" icon="star">
    入門用の[ブログを作るチュートリアル](/ja/tutorial/0-introduction/)を通じて、基本を学びながら最初のAstroサイトを作成しましょう。
  </Card>

  <SplitCard title="新しいプロジェクトを開始する" icon="rocket">
    ```sh
    # npmで新しいプロジェクトを作成する
    npm create astro@latest
    ```
    
    [インストールガイド](/ja/install/auto/)には、CLIウィザードによるAstroのインストール、既存のAstro GitHubリポジトリからの新しいプロジェクトの作成、Astroの手動インストールについて、ステップバイステップの手順が記載されています。
  </SplitCard>

  <ListCard title="学ぶ" icon="open-book">
    - [Astroの主な特徴](/ja/concepts/why-astro/)
    - [アイランドアーキテクチャ](/ja/concepts/islands/)
    - [Astroコンポーネント](/ja/basics/astro-components/)
    - [Astroテンプレートの構文](/ja/basics/astro-syntax/)
  </ListCard>

  <ListCard title="拡張する" icon="puzzle">
    - [ReactやTailwindのインテグレーションを追加する](/ja/guides/integrations-guide/)
    - [型安全なコンテンツコレクションを作成する](/ja/guides/content-collections/)
    - [ビュートランジションでナビゲーションを強化する](/ja/guides/view-transitions/)
    - [ヘッドレスCMSをプロジェクトにつなげる](/ja/guides/cms/)
  </ListCard>
</CardGrid>

<Discord title="何か知りたいことや、関わりたいことはありますか？" cta="Discordに参加する"/>
